<template>
  <div class="index">
    <Nav></Nav>
    <el-row :gutter="24">
      <el-col :span="6">
        <div class="cardContent" >
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <component :is="cardList[0].type" :nowIndex="cardList[0]" :cardData="cardData[0]" :nowId="0" />
        </div>
        <div class="cardContent">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <component :is="cardList[2].type" :nowIndex="cardList[2]" :cardData="cardData[2]" :nowId="1" />
        </div>
        <div class="cardContent" style="margin-bottom:0px;">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <component :is="cardList[4].type" :nowIndex="cardList[4]" :cardData="cardData[4]" :nowId="2" />
        </div>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20" class="menu">
          <el-col :span="6" class="menu_bar">
            <router-link to="/">
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-1" />
                </svg>
              </div>
              <p>首页概览</p>
            </router-link>
          </el-col>
          <el-col :span="6" class="menu_bar">
            <router-link to="/overview">
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-caidan" />
                </svg>
              </div>
              <p>设备概览</p>
            </router-link>
          </el-col>
          <el-col :span="6" class="menu_bar">
            <router-link to="/warnSet">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-baojingshezhi" />
              </svg>
            </div>
            <p>报警设置</p>
            </router-link>
          </el-col>
          <el-col :span="6" class="menu_bar">
            
              <div @click="torouter('set')">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongshezhi" />
                </svg>
              </div>
              <p>系统设置</p>
           
          </el-col>
        </el-row>
        <el-row :span="24">
          <div class="cardContent mapCard bg1card">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <CardMap></CardMap>
          </div>
        </el-row>
        <el-row :span="24">
          <div class="cardContent bg1card">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <CardChart ref="child"></CardChart>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="cardContent">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <component :is="cardList[1].type" :nowIndex="cardList[1]" :cardData="cardData[1]" :nowId="3" />
        </div>
        <div class="cardContent">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <component :is="cardList[3].type" :nowIndex="cardList[3]" :cardData="cardData[3]" :nowId="4" />
        </div>
        <div class="cardContent" style="margin-bottom:0px;">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <component :is="cardList[5].type" :nowIndex="cardList[5]" :cardData="cardData[5]" :nowId="5" />
        </div>
      </el-col>
    </el-row>
    <span class="index_time" style="float: left; margin-left: 30px; font-family: electronicFont;">{{this.time}}</span>
    <span class="index_time" style="float: right; margin-right: 30px;">{{this.phone}}</span>
  </div>
</template>

<script>
import demo from "../../static/ceshi.json";
import Nav from "../components/index/navbar";
import CardWarning from "../components/card/CardWarning";
import CardAc from "../components/card/CardAc";
import CardNormal from "../components/card/CardNormal";
import CardTemp from "../components/card/CardTemp";
import CardXtg401 from "../components/card/CardXtg401";
import CardXtg402 from "../components/card/CardXtg402";
import CardXtg403 from "../components/card/CardXtg403";
import CardK8s from "../components/card/CardK8s";
import CardK8s501 from "../components/card/CardEnvie";
import CardHumi from "../components/card/CardHumi";
import CardHumiA from "../components/card/CardHumiA";
import CardDeac from "../components/card/CardDeac";
import CardAirclean from "../components/card/CardAirclean";
import CardAirfilter from "../components/card/CardAirfilter";
import CardMouse from "../components/card/CardMouse";
import CardCleantable from "../components/card/CardCleantable";
import CardCleanbox from "../components/card/CardCleanbox";
import CardAirlite from "../components/card/CardAirlite";
import CardFilterlite from "../components/card/CardFilterlite";
import CardTable from "../components/card/CardTable";
import CardIrf818 from "../components/card/CardIrf818";
import CardChart from "../components/card/CardChart";
import CardMap from "../components/card/CardMap";
import CardInfrared from "../components/card/CardInfrared";
import CardDisinfect from "../components/card/CardDisinfect";
import CardWind from "../components/card/CardWind";
export default {
  components: {
    demo,
    Nav,
    CardWarning,
    CardK8s,
    CardXtg403,
    CardAc,
    CardAirclean,
    CardTemp,
    CardXtg401,
    CardXtg402,
    CardMap,
    CardChart,
    CardAirfilter,
    CardMouse,
    CardDeac,
    CardHumi,
    CardHumiA,
    CardNormal,
    CardCleantable,
    CardCleanbox,
    CardTable,
    CardAirlite,
    CardFilterlite,
    CardIrf818,
    CardK8s501,
    CardInfrared,
    CardDisinfect,
    CardWind
  },
  inject: ['reload'],
  data() {
    return {
      height: `${document.documentElement.clientHeight}`,
      grade:localStorage.getItem("当前用户权限"),
      listData:[],
      phone:'',
      map:'',
      time:'',
      // logo:'',
      timercreatCardLoc: "", //定时器creatCardLoc
      timergetlayout: '', //定时器获取首页卡片数据
      // index:标记空调是第几个  type：显示当前card 是哪一个设备的信息
      cardList: [
        { index: 0, type: "" },
        { index: 0, type: "" },
        { index: 0, type: "" },
        { index: 0, type: "" },
        { index: 0, type: "" },
        { index: 0, type: "" },
      ],
      cardList2:[],
      cardData:[],
      orderData:[
        { type:19, name:'温湿度(T100)',backName:'CardTemp'},
        { type:17, name:'云测仪',backName:'CardK8s'},
        { type:20, name:'空气监测(K8S)',backName:'CardK8s501'},
        { type:2, name:'恒湿机（120/120s）',backName:'CardHumi'},
        { type:3, name:'恒湿机（120a）',backName:'CardHumiA'},
        { type:5, name:'新风机',backName:'CardAirfilter'},
        { type:4, name:'霉菌机',backName:'CardAirclean'},
        { type:21, name:'数据采集器',backName:'CardXtg401'},
        { type:1, name:'空调(818)',backName:'CardIrf818'},
        { type:7, name:'净化整理台',backName:'CardCleantable'},
        { type:6, name:'漏水驱鼠云测仪',backName:'CardMouse'},
        { type:10, name:'除酸机',backName:'CardDeac'},
        { type:8, name:'整理台',backName:'CardTable'},
        { type:9, name:'净化柜',backName:'CardCleanbox'},
        { type:11, name:'灯光门禁控制器',backName:'CardNormal'},
        { type:18, name:'空调(816)',backName:'CardAc'},
        { type:14, name:'净化舱',backName:'CardDisinfect'},
        { type:24, name:'健康洁净机',backName:'CardAirlite'},
        { type:25, name:'数据采集器',backName:'CardXtg401'},
        { type:16, name:'通用模块',backName:'CardNormal'},
        { type:15, name:'红外主机',backName:'CardNormal'},
        { type:12, name:'RFID风淋通道',backName:'CardWind'},
        { type:13, name:'智能排水工作站',backName:'CardNormal'},

      ]
    };
  },
  created() {
    // this.getencode()
    //获取首页卡片数据相关
    if(JSON.parse(localStorage.getItem("cardList")) != null && JSON.parse(localStorage.getItem("cardData")) !== null){
      this.getcardStorage()//缓存数据
    }
    this.getlist()
    this.getlayout();
    setTimeout(()=>{
      this.getCardData();
    },1500)
    //获取首页卡片数据循环
    this.timergetlayout = setInterval(() => {
      setTimeout(this.getCardData(), 0);
    }, 3000);
    // logo
     if(localStorage.getItem('map') == '{}' ||localStorage.getItem('map') == '' || localStorage.getItem('map') == null || localStorage.getItem('map') == undefined){
          this.map = require('../assets/map.png')
          localStorage.setItem("map", this.map);
      } else{
          this.map = localStorage.getItem('map')
      }
    //   if(localStorage.getItem("isFirst") != undefined) {
        setTimeout(()=>{
          this.$refs.child.getTemp();
        },100)
    //   }
      // 4.0接口逻辑
      // this.$router.push( {path: '/', query: {id: 16 } })
      // 参数名：encode
      
      localStorage.setItem('video','false')
      localStorage.setItem('videos','false')
      localStorage.setItem('doors','false')

      // 假数据模板
      localStorage.setItem("menuDataJson", JSON.stringify(demo));

  },
  mounted() {
  },
  methods: {
    getlist(){
      var params = {
          "getdevlink":"",
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        if(res.data.result == 'ok'){
          this.listData = res.data.getdevlink
        }else{
        }
        
      })
    },
    //拿取缓存数据
    getcardStorage(){
      //缓存卡片列表
      this.cardList2 = JSON.parse(localStorage.getItem("cardList"));
      //缓存卡片内容 逻辑处理
      var getdevinfo = JSON.parse(localStorage.getItem("cardData"));
      var cardDemo = []
      for(var c = 0; c < this.cardList2.length; c++){
        var ss = {
          type: this.cardList2[c].type,
          name:  this.cardList2[c].name,
          uid:  this.cardList2[c].uid,
          addr: this.cardList2[c].addr,
          backName:  this.cardList2[c].backName,
          index: 0,
          unit:[]
        }
        cardDemo.push(ss)
      }
      for(var b = 0; b < cardDemo.length; b++){
        var number = 0
        for(var d = 0; d < getdevinfo.length; d++){
          if(getdevinfo[d].type == cardDemo[b].backName){
            number++
            cardDemo[b].unit.push(getdevinfo[d])
            if(cardDemo[b].uid == getdevinfo[d].uid && cardDemo[b].addr == getdevinfo[d].addr){
              cardDemo[b].index = number-1
            }
          }
        }
      }
      this.cardData = cardDemo
      this.cardList = this.cardList2
    },
    //获取getlayout
    getlayout() {
      //卡片布局
      var params2 = {
          "getlayout":"layout5",
      }
      this.$http.post(this.$baseUrl, params2).then((res) => {
        if(res.data.result == 'ok'){
          if(res.data.layout5 != undefined){
            // 旧逻辑
            // this.cardList2 = JSON.parse(res.data.layout5);
            // 新逻辑
            this.cardList2 = res.data.layout5;
            localStorage.setItem('cardList',JSON.stringify(this.cardList2))   
            this.getCardData()
          }
        }else{
        }
        
      })
      // //logo
      // var params = {
      //     "getlayout":"layout7",
      // }
      // this.$http.post(this.$baseUrl, params).then((res) => {
      //   this.logo = res.data.layout7;
      //   localStorage.setItem('logo', this.logo)
      // })
      //电子地图
      var params = {
          "getlayout":"layout6",
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        this.map = res.data.layout6;
        localStorage.setItem('map', this.map)
      })
      //地图节点
      var params3 = {
        "getlayout":"layout9"
      }
      this.$http.post(this.$baseUrl, params3).then((res) => {
        // this.map = res.data.layout6;
        // localStorage.setItem('map', this.map)
        localStorage.setItem("moveArr",  res.data.layout9)
      })
      //联系电话
      var params = {
          "getlayout":"layout0",
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        this.phone = res.data.layout0.servicephone;
        localStorage.setItem('phone', this.phone)
      })
    },
    //卡片内容请求
    getCardData () {
      // 获取当前时间日期
      this.time = localStorage.getItem('日期')
      if(this.cardList2.length == 0){//判断layout接口没有走通
        console.log('layout卡片预览框失败')
        this.$message({
          message: '服务器访问失败',
          type: 'error',
          duration: 1000
        });
        this.getlayout()
      }else{
        var cardDemo = []
        if(this.listData.length == 0){//判断设备列表接口是否走通 1、设备列表接口不通，重新获取 2、无设备，将默认数值加进去
          console.log('设备列表为空或者失败')
          this.getlist()
          for(var c = 0; c < this.cardList2.length; c++){
            var str = []
            var ss = {
              type: this.cardList2[c].type,
              name:  this.cardList2[c].name,
              uid:  this.cardList2[c].uid,
              addr: this.cardList2[c].addr,
              backName:  this.cardList2[c].backName,
              index: 0,
              unit:[]
            }
            cardDemo.push(ss)
          }
          this.cardData = cardDemo
          this.cardList = this.cardList2
        }else{//
          var warnNum = 0;
          for(var h = 0; h < this.cardList2.length; h++){
            if(this.cardList2[h].backName == "warning"){ //判断当前6个卡片框是否全部都是报警
              warnNum++
            }
          }
          if(warnNum == 6){ //全是报警框，需要自动分配首页卡片框
            var orderNum = 0
            for(var o = 1; o < this.cardList2.length; o++){ //循环6个卡片框 从第二个卡片开始循环，第一个卡片默认放报警
              var nn = 0
              for(var p = orderNum; p < this.orderData.length; p++){//循环按顺序的设备列表
                for(var q = 0; q < this.listData.length; q++){ //循环真实设备列表获取设备信息
                  if(nn == 0){
                    if((this.orderData[p].type == this.listData[q].type) && (this.listData[q].devlink.length > 0)){ //当前循环到的设备类型里有真实设备
                      nn++; //判断到有达成条件的就不再进行顺序列表的循环 跳出进行下一个卡片框循环
                      orderNum = p+1 //下一次卡片框循环中，筛选顺序设备，顺序列表开始循环的坐标从当前设备坐标＋1
                      this.cardList2[o] = {
                        "number":o,
                        "type":this.orderData[p].backName, //卡片路径名
                        "name":this.listData[q].typename,//卡片类型名
                        "uid":this.listData[q].devlink[0].uid,//设备编号
                        "addr":this.listData[q].devlink[0].addr,//设备地址
                        "backName":this.listData[q].type//设备类型
                      }
                    }
                  }
                  
                }
              }
            }
            var arr2 = { //报警卡片 添加number编号
              "number":0,
              "type":this.cardList2[0].type, //卡片路径名
              "name":this.cardList2[0].name,//卡片类型名
              "uid":this.cardList2[0].uid,//设备编号
              "addr":this.cardList2[0].addr,//设备地址
              "backName":this.cardList2[0].backName//设备类型
            }
            this.cardList2[0] = arr2
            // console.log(this.cardList2)
            var params = {
                "setlayout":"layout5",
                // 旧逻辑 JSON.stringify(this.cardList2)
                "layout":this.cardList2
            }
            this.$http.post(this.$baseUrl, params).then((res) => { //将默认分配的卡片位置保存
            });
          }else{//判断到有其他类型卡片框，保持当前卡片位置 
          }
        }
        var infrared = 0 //判断有没有红外布撤防
        // 建立首页卡片详细数据获取数组
        var params = {
            "getdevinfo":[],
        }
        // 循环当前首页卡片展示设备
        for(var c = 0; c < this.cardList2.length; c++){
          var str = []
          var ss = {
            type: this.cardList2[c].type,
            name:  this.cardList2[c].name,
            uid:  this.cardList2[c].uid,
            addr: this.cardList2[c].addr,
            backName:  this.cardList2[c].backName,
            index: 0,
            unit:[]
          }
          cardDemo.push(ss)
          // 筛选获取当前卡片数据要发送的内容
          if(this.cardList2[c].backName != "warning" && this.cardList2[c].backName != "infrared"){
            for(var i = 0; i < this.listData.length; i++){
                if(this.cardList2[c].backName == this.listData[i].type){
                  if(this.cardList2[c].type == 25){//判断有数据采集器，需要请求红外布撤防
                    infrared = 1
                  }
                    var num = 0
                    for(var j = 0; j < this.listData[i].devlink.length; j++){
                        if(this.listData[i].devlink[j].ready == 1){
                            var arr = {
                                type:this.listData[i].type,
                                name:this.listData[i].devlink[j].name,
                                addr:this.listData[i].devlink[j].addr,
                                uid:this.listData[i].devlink[j].uid,
                                index:num++,
                                unit:[]
                            }
                            str.push(arr)
                        }
                    }
                    //循环当前首页预览框用到的设备类型
                    for(var a = 0; a < str.length; a++){
                        var demo = {}
                        if(str[a].type == 17 || str[a].type == 19 || str[a].type == 20){//云测仪、温湿度、空气监测(K8S)
                          demo = {
                              "uid":str[a].uid,
                              "type":str[a].type,
                              "addr":str[a].addr,
                              "unittype":"id-ready-name-value-flag-min-max",
                          }
                        }else if(str[a].type == 25){//数据采集器
                          demo = {
                              "uid":str[a].uid,
                              "type":str[a].type,
                              "addr":str[a].addr,
                              "unittype":"id-ready-name-value-alarmstate",
                          }
                        }else{
                          demo = {
                              "uid":str[a].uid,
                              "type":str[a].type,
                              "addr":str[a].addr,
                              "unittype":"id-ready-name-value-flag-min-max",
                          }
                        }
                        if(str[a].type == 1){//818
                          demo.unit = "04-05-06-07-08-09"
                        }else if(str[a].type == 2 || str[a].type == 3){//恒湿机（120/120s） 恒湿机（120a）
                          demo.unit = "02-03-05-24-27-34-46-51-54"
                        }else if(str[a].type == 4){//霉菌机
                          demo.unit = "00-01-02-03-04-27-31-33"
                        }else if(str[a].type == 5){//新风机
                          demo.unit = "00-01-02-03-04-05-06-27-31-33"
                        }else if(str[a].type == 6){//漏水驱鼠云测仪
                          demo.unit = "00-02-04-06-29-30-33"
                        }else if(str[a].type == 7 || str[a].type == 8){//净化整理台  整理台
                          demo.unit = "01-02-03-04-27-31-32-33"
                        }else if(str[a].type == 9){//净化柜
                          demo.unit = "00-01-02-03-04-05"
                        }else if(str[a].type == 10){//除酸机
                          demo.unit = "00-01-02-03-04-05-06-10-11-12-24-27"
                        }else if(str[a].type == 16){//通用模块
                          demo.unit = "00-01-02-03-23-24"
                        }else if(str[a].type == 18){//空调818
                          demo.unit = "00-01-02-03-30-31-32-33-34"
                        }else if(str[a].type == 24){//健康洁净机
                          demo.unit = "00-01-02-03"
                        }else if(str[a].type == 14){//净化舱
                          demo.unit = "03-06-11-14-29-32-40"
                        }else if(str[a].type == 12){//风淋通道
                          demo.unit = "03-04-05-06-11-12"
                        }
                        params.getdevinfo.push(demo)
                    } 
                }
            } 
          }else{
            //判断有红外布撤防卡片
            if(this.cardList2[c].backName == "infrared"){
              infrared = 1
            }
          }
        }
        // 报警卡片请求 必须一直请求（电子地图报警）
        // 数据接口请求
        var params2 = {
          "geterror":"",
        }
        this.$http.post(this.$baseUrl, params2).then((res) => {
          
          var str = {}
          var warnData = []
          var geterror = res.data.geterror
          for( var f = 0; f < geterror.length; f++){
            str = {
              name: geterror[f].devname, // 设备名称
              errorinfo: geterror[f].errorinfo,
              time: this.formatDate(geterror[f].time* 1000, 'YYYY-MM-DD H:m') ,
              type: geterror[f].type, // 设备类型
              uid: geterror[f].uid, // 设备id
              addr: geterror[f].addr, // 设备addr
              id: geterror[f].id, // 设备子项id
              idname:geterror[f].idname, // 设备子项名称
              alarmstate: geterror[f].alarmstate, // 设备报警状态
            }
            warnData.push(str)
          }
          localStorage.setItem("warnData", JSON.stringify(warnData));
        })
        // ------
         // 判断有没有红外布撤防卡片
         if( infrared = 1){
          var params3 = {
              "getinfraredinfo":'',
          }
          this.$http.post(this.$baseUrl, params3).then((res) => {
            localStorage.setItem('红外布撤防数据',JSON.stringify(res.data.getinfraredinfo))   
          })
         }
        //-----------
        // 卡片数据请求
        this.$http.post(this.$baseUrl, params).then((res) => {
          // res.data.getdevinfo[4].unit[0].alarmstate = 1
          // res.data.getdevinfo[4].unit[0].value = 1
          var getdevinfo = res.data.getdevinfo
          for(var e = 0;e < getdevinfo.length; e++){
            if(getdevinfo[e].type == 25){//判断是数据采集器，给do付布尔值
              for(var f = 0; f < getdevinfo[e].unit.length; f++){
                if(f > 9 && f < 14){
                  if(getdevinfo[e].unit[f].value == 0){
                      getdevinfo[e].unit[f].value = false
                  }else{
                      getdevinfo[e].unit[f].value = true
                  }
                }
              }
            }
          }
          localStorage.setItem('cardData',JSON.stringify(getdevinfo))   
          for(var b = 0; b < cardDemo.length; b++){
            var number = 0
            for(var d = 0; d < getdevinfo.length; d++){
              if(getdevinfo[d].type == cardDemo[b].backName){
                number++
                cardDemo[b].unit.push(getdevinfo[d])
                if(cardDemo[b].uid == getdevinfo[d].uid && cardDemo[b].addr == getdevinfo[d].addr){
                  cardDemo[b].index = number-1
                }
              }
            }
          }
          this.cardData = cardDemo
          this.cardList = this.cardList2
        })
      }
    },
    torouter(val){
      this.grade = localStorage.getItem("当前用户权限")
      if(this.grade == undefined || this.grade == null || this.grade == 'undefined' || this.grade == 'null'){
        setTimeout(() => {
          this.torouter(val)
        }, 1000);
      }else{
        if(this.grade == '首次进入' && val == 'set'){//首次访问没有账号情况下
          this.$router.push({'path':'/'+val});
        }else if(this.grade == '高级管理员' || this.grade == '普通管理员' || this.grade == '普通用户' || this.grade == '第三方用户'){
          this.$router.push({'path':'/'+val});
        }
      }
      
    },
  },
  // 清除定时器
  beforeDestroy() {
    clearInterval(this.timercreatCardLoc);
    this.timercreatCardLoc = null;
    clearInterval(this.timergetlayout);
    this.timergetlayout = null;
    // alert("已经销毁了")
  },
};
</script>

<style scoped>
.cardContent {
  border: 1px solid rgba(89, 129, 165, 0.4);
  height: 305px;
  background: rgba(89, 129, 165, 0.2);
  width: 98%;
  margin: 0 auto;
  margin-bottom: 24px;
  /* margin-left: 2%; */
  /* float: right; */
  position: relative;
  width: 100%;
}
@media screen and (max-width: 1280px) {
  .cardContent {
    height: 340px;
  }
}
.cardContent span:nth-child(1) {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 1px 0 0 1px;
}
.cardContent span:nth-child(2) {
  position: absolute;
  right: 0;
  top: 0;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 1px 1px 0 0;
}
.cardContent span:nth-child(3) {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 0 1px 1px 0;
}
.cardContent span:nth-child(4) {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 0 0 1px 1px;
}
.menu {
  text-align: center;
  margin-top: 28px;
  color: #fff;
}
.menu .icon {
  font-size: 30px;
  margin: 15px auto;
}
.menu_bar:hover {
  cursor: pointer;
}
.menu_bar div { 
  width: 60px;
  height: 60px;
  background: rgba(89, 129, 165, 0.4);
  margin: 0 auto;
  border-radius: 50%;
}
.menu_bar p {
  margin-top: 10px;
}
.mapCard {
  margin-top: 15px;
  height: 498px;
}
/deep/ .el-switch__core:after{
  top: 0px;
}
/deep/ .el-switch.is-checked .el-switch__core::after{
  top: 1px;
}
@media screen and (max-width: 1280px) {
  .mapCard {
    height: 538px;
  }
  .menu {
    margin-top: 40px;
    margin-bottom: 20px;
  }
}
.index_time{
  margin-top: -10px;
  color:#7ed5ff;
  letter-spacing: 2px;
  text-shadow: 2px 2px 10px #fff;
}
</style>
